<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动后对父类的影响</title>

    <style>
        .father{
            width: 620px;
            background: antiquewhite;
    /*当父类感知不到子类的高度时，可以给父类设置 overflow: hidden 属性，此时父类可以感知到字类的高度并且保持块状元素*/
            overflow: hidden;
            /*有些属性是针对块状元素的*/

            /*设置块状元素居中*/
            margin: 0 auto;

            /*设置浮动也能感知到子类的高度,但是不能使用margin 进行居中*/
            /*float: left;*/

            /*设置高度也能感知到子类的高度,能使用margin 进行居中*/
            /*height: 220px;*/

        }

        .father>div:first-child{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }

        .father>div:nth-child(2){
            width: 200px;
            height: 200px;
            background: deeppink;
            float: left;
        }

        .father>div:last-child{
            width: 200px;
            height: 200px;
            background: tomato;
            float: left;
        }



    </style>

</head>
<body>


<div class="father">
    <div></div>
    <div></div>
    <div></div>
</div>


</body>
</html>